<template>
  <div class="app-container">
    <section>
      <span
        style="font-size:20px;font-weight: bold; display:block;margin-bottom: 20px;text-align: center;"
      >配送出库单列表</span>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true">
          <el-form-item>
            <el-date-picker
              :picker-options="pickerOptions"
              v-model="form.date"
              @change="dateChangebirthday1"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="单据状态" prop="OrderStatus">
            <el-select v-model="form.OrderStatus" filterable placeholder="请选择单据状态">
              <el-option
                v-for="item in SKUSaleModeList"
                :key="item.OrderStatus"
                :label="item.OrderStatusName"
                :value="item.OrderStatus"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="到货状态" prop="ArrivalStatus">
            <el-select v-model="form.ArrivalStatus" filterable placeholder="请选择到货状态">
              <el-option
                v-for="item in ArrivalStatusList"
                :key="item.ArrivalStatus"
                :label="item.ArrivalStatusName"
                :value="item.ArrivalStatus"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="付款状态" prop="PaymentStatus">
            <el-select v-model="form.PaymentStatus" filterable placeholder="请选择付款状态">
              <el-option
                v-for="item in PaymentStatusList"
                :key="item.PaymentStatus"
                :label="item.PaymentStatusName"
                :value="item.PaymentStatus"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="摘要">
            <el-input v-model="form.Summary" auto-complete="off"></el-input>
          </el-form-item>-->
          <!-- <el-form-item label="供应商">
            <el-input v-model="form.SupplierId" auto-complete="off"></el-input>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="GetPurchaseOrdersDetailList()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="add()">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-table :data="List" border style="width: 100%">
        <el-table-column prop="OrderNo" label="采购订单号" align="center"></el-table-column>
        <el-table-column prop="CreaterName" label="创建人" align="center"></el-table-column>
        <el-table-column prop="CreateDate" label="时间" align="center"></el-table-column>
        <el-table-column prop="BillStatus" label="审核状态" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.BillStatus==0">草稿</span>
              <span v-if="scope.row.BillStatus==1">已审核</span>
              <span v-if="scope.row.BillStatus==2">已删除</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ReceiptStatus" label="到货状态" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.ReceiptStatus==0">未付款</span>
              <span v-if="scope.row.ReceiptStatus==1">部分到账</span>
              <span v-if="scope.row.ReceiptStatus==2">已审核</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="PayStatus" label="付款状态" align="center">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.PayStatus==0">未付款</span>
              <span v-if="scope.row.PayStatus==1">部分付款</span>
              <span v-if="scope.row.PayStatus==2">已付款</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="TotalMoney" label="金额" align="center"></el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleShop(scope.row.POId)">查看</el-button>
            <el-button
              type="danger"
              size="small"
              v-on:click="DeletePurchaseOrders(scope.row.POId)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout=" prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
        style="float:right;margin-top: 10px;"
      ></el-pagination>
    </section>
  </div>
</template>

<script>
import {
  AddDeliveryOutStock,
  DeletePurchaseOrders,
  GetPurchaseOrdersDetailList
} from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },

        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              const end = new Date();
              console.log(this);
              console.log(formatDate);
              var now = new Date(); //当前日期
              var nowDayOfWeek = now.getDay(); //今天本周的第几天
              var nowDay = now.getDate(); //当前日
              var nowMonth = now.getMonth(); //当前月
              var nowYear = now.getYear(); //当前年
              nowYear += nowYear < 2000 ? 1900 : 0; //
              var weekStartDate = new Date(
                nowYear,
                nowMonth,
                nowDay - nowDayOfWeek
              );
              const start = weekStartDate;
              start.setTime(start);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              var now = new Date(); //当前日期
              var nowDayOfWeek = now.getDay(); //今天本周的第几天
              var nowDay = now.getDate(); //当前日
              var nowMonth = now.getMonth(); //当前月
              var nowYear = now.getYear(); //当前年
              nowYear += nowYear < 2000 ? 1900 : 0; //
              const start = new Date(
                nowYear,
                nowMonth,
                nowDay - nowDayOfWeek - 7
              );
              start.setTime(start);
              const end = new Date(
                nowYear,
                nowMonth,
                nowDay - nowDayOfWeek - 1
              );
              start.setTime(start);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              var now = new Date(); //当前日期
              var nowDayOfWeek = now.getDay(); //今天本周的第几天
              var nowDay = now.getDate(); //当前日
              var nowMonth = now.getMonth(); //当前月
              var nowYear = now.getYear(); //当前年
              nowYear += nowYear < 2000 ? 1900 : 0; //
              const end = new Date();
              const start = new Date(nowYear, nowMonth, 1);
              start.setTime(start);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              var now = new Date(); //当前日期
              var nowDayOfWeek = now.getDay(); //今天本周的第几天
              var nowDay = now.getDate(); //当前日
              var nowMonth = now.getMonth(); //当前月
              var nowYear = now.getYear(); //当前年
              nowYear += nowYear < 2000 ? 1900 : 0; //
              var lastMonthDate = new Date(); //上月日期
              lastMonthDate.setDate(1);
              lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
              var lastYear = lastMonthDate.getYear();
              var lastMonth = lastMonthDate.getMonth();
              //								const end = new Date();
              const start = new Date(nowYear, nowMonth - 1, 1);
              start.setTime(start);
              const end = new Date(
                nowYear,
                nowMonth - 1,
                getMonthDays(lastMonth)
              );
              start.setTime(start);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "近3天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "近5天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 5);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近10天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 10);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      editFormVisible: false,
      page: 1,
      pageSize: 10,
      total: 0,
      List: [],
      form: {
        date: [],
        OrderStatus: -1,
        ArrivalStatus: -1,
        PaymentStatus: -1
      },
      SKUSaleModeList: [
        {
          OrderStatus: -1,
          OrderStatusName: "全部"
        },
        {
          OrderStatus: 0,
          OrderStatusName: "草稿"
        },
        {
          OrderStatus: 1,
          OrderStatusName: "审核"
        }
      ],
      ArrivalStatusList: [
        {
          ArrivalStatus: -1,
          ArrivalStatusName: "全部"
        },
        {
          ArrivalStatus: 0,
          ArrivalStatusName: "未到货"
        },
        {
          ArrivalStatus: 1,
          ArrivalStatusName: "部分到货"
        },
        {
          ArrivalStatus: 2,
          ArrivalStatusName: "已付款"
        }
      ],
      PaymentStatusList: [
        {
          PaymentStatus: -1,
          PaymentStatusName: "全部"
        },
        {
          PaymentStatus: 0,
          PaymentStatusName: "未付款"
        },
        {
          PaymentStatus: 1,
          PaymentStatusName: "部分付款"
        },
        {
          PaymentStatus: 2,
          PaymentStatusName: "已付款"
        }
      ]
    };
  },
  created() {
    this.GetPurchaseOrdersDetailList();
  },
  methods: {
    dateChangebirthday1(val) {
      this.startTime = val;
      console.log(this.startTime);
    },
    //获取历史列表
    GetPurchaseOrdersDetailList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize,
        OrderStatus: this.form.OrderStatus,
        ArrivalStatus: this.form.ArrivalStatus,
        PaymentStatus: this.form.PaymentStatus,
        Summary: this.form.Summary,
        OderNo: this.form.OderNo,
        StartDate: this.form.date[0],
        EndDate: this.form.date[1]
      };
      GetPurchaseOrdersDetailList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("获取订单列表", vdata);
          self.List = vdata.DataList;
          self.total = vdata.TotalCount;
        }
        self.skulistLoading = false;
      });
    },

    //删除订单
    DeletePurchaseOrders(POId) {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        POId: POId
      };
      DeletePurchaseOrders(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          this.$message({
            message: res.data.Description,
            type: "success"
          });
        }
        this.GetPurchaseOrdersDetailList();
      });
    },

    //显示编辑
    handleEdit: function(index, row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
      console.log("++++++++", this.editForm);
    },

    handleShop(POId) {
      console.log(POId);
      this.$router.push({
        path: "/Purchase/Orders",
        query: {
          POId: POId
        }
      });
    },

    add() {
      this.$router.push({
        path: "/Outofstock/Other"
      });
    },

    //翻页
    handleCurrentChange(val) {
      this.page = val;
      this.GetPurchaseOrdersDetailList();
    }
  }
};
</script>

<style>
</style>